/* eslint-disable no-undef */
<template>
  <div id="maptitles">
    <Search></Search>
    <!-- <Layerbox></Layerbox> -->
    <div class="switch">
      <div class="vector" @click="sl">矢量地图</div>
      <div class="dom" @click="yx">影像地图</div>
    </div>

    <!-- 右侧菜单栏 -->
    <div class="layerbox">
      <div class="options">
        <img src="../assets/images/tj.png" />
        <div class="name">添加</div>
      </div>
      <div
        class="options"
        @click="
          hqzb();
          change();
        "
      >
        <img src="../assets/images/wz.png" />
        <div class="name">获取坐标</div>
      </div>
      <div class="options">
        <img src="../assets/images/zh.png" />
        <div class="name">坐标转换</div>
      </div>
      <div class="options">
        <img src="../assets/images/hz.png" />
        <div class="name">绘制矢量</div>
      </div>
      <div class="options">
        <img src="../assets/images/tj.png" />
        <div class="name">地图量测</div>
      </div>
      <div class="options">
        <img src="../assets/images/sj.png" />
        <div class="name">数据转换</div>
      </div>
    </div>
    <div id="coordinate" v-if="isShow">
      <p>获取坐标</p>
      <div>当前坐标</div>
      <button class="btn" v-on:click="copyLink">
        <img src="../assets/images/fz.png" />
      </button>
      <div id="lng1">经度：{{ num.lng }}</div>
      <div id="lat1">纬度：{{ num.lat }}</div>
    </div>
  </div>
</template>

<script>
//mapboxgl
// import mapboxgl from "mapbox-gl"
import mapboxgl from "mapbox-gl";
//mapbox中的图层?
import { MapboxLayer } from "@deck.gl/mapbox";
//图层？
import { Tile3DLayer } from "@deck.gl/geo-layers";
//导入导航组建
import Search from "./Search.vue";
// import Layerbox from './LayerBox.vue'
//引入mapbox-gl.css
import "mapbox-gl/dist/mapbox-gl.css";
//引入复制插件
import Clipboard from "clipboard";
//mapbox的token
mapboxgl.accessToken =
  "pk.eyJ1Ijoid2FueWFueWFuIiwiYSI6Im1uNVZnTncifQ.90XY40_yjpItUHO8HnbbpA";

export default {
  components: {
    Search,
    //   Layerbox
  },
  data() {
    return {
      //地图为空
      map: {},
      num: {
        lng: 0,
        lat: 0,
      },
      isShow: false,
      clipboard: {},
    };
  },
  //添加图层
  add3DModel() {
    //创建自己的图层layer
    const my3dLayer = new MapboxLayer({
      id: "my-3dlayer",
      type: Tile3DLayer,
      data: "http://localhost/tiles/tileset.json",
    });
    this.map.addLayer(my3dLayer);
  },
  mounted() {
    this.map = window.map = new mapboxgl.Map({
      container: "maptitles",
      //矢量
      style: "mapbox://styles/mapbox/streets-v11",
      bearing: 124.5,
      pitch: 54,
      center: [114.41876113414763, 30.461325698256747],
      zoom: 18,
    });
  },
  methods: {
    //切换矢量底图的方法
    sl: function () {
      this.map = window.map = new mapboxgl.Map({
        container: "maptitles",
        //矢量
        style: "mapbox://styles/mapbox/streets-v11",
        bearing: 124.5,
        pitch: 54,
        center: [114.41876113414763, 30.461325698256747],
        zoom: 18,
      });
    },
    //切换卫星底图的方法
    yx: function () {
      this.map = window.map = new mapboxgl.Map({
        container: "maptitles", //地图容器
        //卫星
        style: "mapbox://styles/mapbox/satellite-v9",
        bearing: 124.5, //旋转角度
        pitch: 54,
        center: [114.41876113414763, 30.461325698256747],
        zoom: 18,
      });
    },
    //在屏幕上获取经纬度信息
    hqzb() {
      this.map.on("click", (move) => {
        this.num.lng = move.lngLat.lng;
        this.num.lat = move.lngLat.lat;
        this.createMaker();
      });
    },
    createMaker() {
      this.map.on("mousedown", marker);
      const marker = new mapboxgl.Marker({
        color: "blue",
        draggable: true,
      })
        .setLngLat([this.num.lng, this.num.lat]) //添加marker的初始化点
        .addTo(this.map);
    },
  },
  change() {
    this.isShow = !this.isShow;
  },
  copyLink() {
    var textBox = document.createElement("input");
    let str = "经度：" + this.num.lng + "纬度：" + this.num.lat;
    textBox.value = str;
    document.body.appendChild(textBox);
    textBox.select();
    document.execCommand("Copy");

    //   var btn = document.getElementById("lng1").innerText;
    //   var btn1 = document.getElementById("lat1").innerText;
    //   var textBox = document.createElement("input");
    //   var textBox1 = document.createElement("input");
    //   textBox.value = btn;
    //   textBox1.value = btn1;
    //   //   console.log(textBox.value);
    //   document.body.appendChild(textBox);
    //   document.body.appendChild(textBox1);
    //   textBox.select();
    //   //   textBox1.select();
    //   document.execCommand("Copy");
  },
};
</script>

<style lang="less" scoped>
body {
  margin: 0;
  padding: 0;
}
#maptitles {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  .switch {
    width: 120px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 10;
  }

  // 右侧菜单栏的css
  .layerbox {
    display: flex;
    width: 550px;
    height: 30px;
    position: absolute;
    right: 30px;
    top: 15px;
    justify-content: space-around;
    background-color: #fff;
    z-index: 10;
    font-size: 13px;
    .options {
      display: flex;
      align-items: center;
    }
    .options img {
      display: flex;
      width: 18px;
      height: 18px;
      padding: 0 5px;
    }
    .options name {
      display: flex;
      width: 20px;
      height: 20px;
    }
  }
  //弹出标签设置
  #coordinate {
    display: flex;
    position: absolute;
    margin: 0px auto;
    width: 160px;
    height: 110px;
    right: 30px;
    top: 60px;
    padding: 0 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #222;
    background: #fff;
    z-index: 10;
    flex-direction: column;
    align-items: flex-start;
    .btn img {
      display: flex;
      width: 20px;
      height: 20px;
      position: absolute;
      top: 45px;
      right: 85px;
    }
  }
}
</style>